
<template>
  <div :style="{...styles.scroll}">
    <Vue3ScrollSeamless
        class="scroll-wrap"
        :classOptions="classOptions"
        :dataList="list"
        ref="scrollSeamless"
    >
      <slot></slot>
    </Vue3ScrollSeamless>
  </div>
</template>

<script setup lang="ts">
import { CSSProperties} from "vue";

const scrollSeamless = ref(null)

const styles: Record<string, CSSProperties> = {
  scroll: {
    height: "90%",
    width: "90%",
    margin: "10px auto",
    overflow: "hidden",
  }
}

const props = defineProps({
  // 无缝滚动列表数据，组件内部使用列表长度。
  list: {
    type:Array,
    required: true
  },
  //步进速度 数值越大速度滚动越快。
  step: {
    type: Number,
    default: 1,
    required: false
  },
  //开启无缝滚动的数据量。
  limitMoveNum: {
    type: Number,
    default: 5,
    required: false
  },
  //是否启用鼠标 hover 控制。
  hoverStop: {
    type: Boolean,
    default: true,
    required: false
  },
  //方向: 0 往下 1 往上 2 向左 3 向右。
  direction: {
    type: Number,
    default: 1,
    required: false
  },
  //单步运动停止的高度(默认值 0 是无缝不停止的滚动)，direction 为 0|1 时生效。
  singleHeight: {
    type: Number,
    default: 0,
    required: false
  },
  //单步运动停止的宽度(默认值 0 是无缝不停止的滚动)，direction 为 2|3 时生效
  singleWidth: {
    type: Number,
    default: 0,
    required: false
  },
  //单步停止等待时间(默认值 1000ms)。
  waitTime: {
    type: Number,
    default: 1000,
    required: false
  },
  //单步切换的动画时间(ms)。
  switchDelay: {
    type: Number,
    default: 400,
    required: false
  },
  //singleHeight and singleWidth 是否开启 rem 度量。
  isSingleRemUnit: {
    type: Boolean,
    default: false,
    required: false
  }
})

const classOptions = {
  step: props.step,
  limitMoveNum: props.limitMoveNum,
  hoverStop: props.hoverStop,
  direction: props.direction,
  singleHeight: props.singleHeight,
  singleWidth: props.singleWidth,
  waitTime: props.waitTime,
  switchDelay: props.switchDelay,
  isSingleRemUnit: props.isSingleRemUnit,
}

</script>


<style scoped lang="scss">

</style>